<template>
  <div class="RowBox"></div>
  <el-row v-for="item in MidData" :gutter="20">
    <el-col :span="6" v-for="item_children in item">
      <div class="grid-content bg-purple" />
      <CardLet
        :src="item_children.children[0].model.resource.cover"
        :title="item_children.children[0].model.resource.title"
        :url="item_children.children[0].model.resource.web_url"
      />
    </el-col>
  </el-row>
</template>

<script setup>
import CardLet from "../hidden/cardLet.vue";
import { MidList } from "../../api/head";
import { ref, watch } from "vue-demi";

/**
 * 获取中间列表数据
 */
const MidData = ref(null);

MidList().then((res) => {
  const response = res.children;
  //切割数据
  const tailor_Data = {
    0: response.slice(0, 4),
    1: response.slice(5, 9),
    2: response.slice(10, 14),
    3: response.slice(15, 19),
    4: response.slice(20, 24),
    5: response.slice(25, 29),
    6: response.slice(30, 34),
  };
  //导出
  MidData.value = tailor_Data;
});

console.log(MidData);
</script>

<style>
.RowBox {
  width: 100vw;
}
.el-row {
  margin-bottom: 20px;
}
.el-row:last-child {
  margin-bottom: 0;
}
.el-col {
  border-radius: 4px;
}

.grid-content {
  border-radius: 4px;
  min-height: 36px;
}
</style>